<template>
  <div>
    <div @click="applynewadd()">
      <slot><el-button type="primary">创建纸张报价</el-button></slot>
    </div>
    <MyDialog
      :title="'操作'"
      :visible.sync="addSwitch"
      :size="showType"
      @beforeClose="close_add"
    >
      <div v-loading="detailLoading" class="guid-add-box">
        <el-form label-width="160px" class="demo-ruleForm">
          <div>
            <el-row style="margin-top: 10px">
              <el-col :span="12" :xs="20">
                <el-form-item prop="company_name" label="公司名称:">
                  <el-input
                    v-model="lastForm.company_name"
                    clearable
                    placeholder="请输入"
                  >
                    <span slot="suffix"></span>
                  </el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12" :xs="20">
                <el-form-item prop="product_name" label="产品名称:">
                  <el-input
                    v-model="lastForm.product_name"
                    clearable
                    placeholder="请输入"
                  >
                    <span slot="suffix"></span>
                  </el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12" :xs="20">
                <el-form-item prop="product_size" label="产品尺寸:">
                  <el-input
                    v-model="lastForm.product_size"
                    clearable
                    placeholder="请输入"
                  >
                    <span slot="suffix"></span>
                  </el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12" :xs="20">
                <el-form-item prop="remarks" label="备注:">
                  <el-input
                    v-model="lastForm.remarks"
                    clearable
                    placeholder="请输入"
                  >
                    <span slot="suffix"></span>
                  </el-input>
                </el-form-item>
              </el-col>
            </el-row>
          </div>
        </el-form>

        <el-tabs v-model="activeName" @tab-click="handleClick">
          <el-tab-pane label="基本信息" name="first">
            <el-form
              ref="baseForm"
              :model="basicForm"
              :rules="basicRules"
              label-width="160px"
              class="demo-ruleForm"
            >
              <div>
                <el-row>
                  <el-col :span="24" :xs="20">
                    <el-form-item label="开料尺寸"></el-form-item>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="12" :xs="20">
                    <el-form-item prop="width" label="宽（米）:">
                      <el-input
                        v-model="basicForm.width"
                        clearable
                        step="0.01"
                        placeholder="请输入"
                        type="number"
                      >
                        <span slot="suffix"></span>
                      </el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12" :xs="20">
                    <el-form-item prop="height" label="高（米）:">
                      <el-input
                        v-model="basicForm.height"
                        clearable
                        step="0.01"
                        type="number"
                        placeholder="请输入"
                      >
                        <span slot="suffix"></span>
                      </el-input>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="12" :xs="20">
                    <el-form-item prop="weight" label="克重（千克）:">
                      <el-input
                        v-model="basicForm.weight"
                        clearable
                        step="0.01"
                        placeholder="请输入"
                        type="number"
                      >
                        <span slot="suffix"></span>
                      </el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12" :xs="20">
                    <el-form-item prop="material" label="材质:">
                      <el-select
                        v-model="basicForm.material"
                        placeholder="请选择"
                      >
                        <el-option
                          v-for="item in materialOptions"
                          :key="item.value"
                          :label="item.label"
                          :value="item.value"
                        ></el-option>
                      </el-select>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="12" :xs="20">
                    <el-form-item prop="price" label="纸张单价（千元/吨）:">
                      <el-input
                        v-model="basicForm.price"
                        clearable
                        step="0.1"
                        type="number"
                        placeholder="请输入"
                      >
                        <span slot="suffix"></span>
                      </el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12" :xs="20">
                    <el-form-item prop="count" label="拼板数（个）:">
                      <el-input
                        v-model="basicForm.count"
                        clearable
                        type="number"
                        placeholder="请输入"
                      >
                        <span slot="suffix"></span>
                      </el-input>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="24" :xs="20">
                    <el-form-item prop="orderNum" label="订单数量（万）:">
                      <el-input
                        v-model="basicForm.orderNum"
                        clearable
                        step="0.1"
                        type="number"
                        placeholder="请输入"
                      >
                        <span slot="suffix"></span>
                      </el-input>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row v-if="useriInfo.is_admin">
                  <el-col :span="24" :xs="20">
                    <el-form-item class="bold" label="纸张成本小计：">
                      {{ paperMinNum }}
                    </el-form-item>
                  </el-col>
                </el-row>
              </div>
            </el-form>
          </el-tab-pane>
          <el-tab-pane label="普通工序" name="second">
            <div class="second-box">
              <el-row class="second-item">
                <el-col :span="12" :xs="20">
                  <p class="second-left">单价</p>
                </el-col>
                <el-col :span="12" :xs="20">
                  <p class="second-right">小计</p>
                </el-col>
              </el-row>

              <el-row class="second-item">
                <el-col :span="12" :xs="20">
                  <p class="second-left bold">
                    1. 印刷： {{ setObj.印刷 }} 元 / 万张:
                  </p>
                </el-col>
                <el-col :span="12" :xs="20">
                  <p class="second-right">
                    <el-input
                      v-model="ordinaryForm.one"
                      clearable
                      step="0.01"
                      type="number"
                      style="width: 100%"
                      placeholder="请输入"
                    >
                      <span slot="suffix"></span>
                      <template slot="append">/每盒</template>
                    </el-input>
                  </p>
                </el-col>
              </el-row>

              <el-row class="second-item">
                <el-col :span="12" :xs="20">
                  <p class="second-left bold">
                    2. 切模： {{ setObj.切模 }} 元 / 万张:
                  </p>
                </el-col>
                <el-col :span="12" :xs="20">
                  <p class="second-right">
                    <el-input
                      v-model="ordinaryForm.two"
                      clearable
                      step="0.01"
                      type="number"
                      placeholder="请输入"
                    >
                      <span slot="suffix"></span>
                      <template slot="append">/每盒</template>
                    </el-input>
                  </p>
                </el-col>
              </el-row>

              <el-row class="second-item">
                <el-col :span="12" :xs="20">
                  <p class="second-left bold">
                    3. 撕盒： {{ setObj.撕盒 }} 元 / 万个:
                  </p>
                </el-col>
                <el-col :span="12" :xs="20">
                  <p class="second-right">
                    <el-input
                      v-model="ordinaryForm.three"
                      clearable
                      step="0.01"
                      type="number"
                      placeholder="请输入"
                    >
                      <span slot="suffix"></span>
                      <template slot="append">/每盒</template>
                    </el-input>
                  </p>
                </el-col>
              </el-row>

              <el-row class="second-item">
                <el-col :span="12" :xs="20">
                  <p class="second-left bold">
                    4. 品检： {{ setObj.品检 }} 元 / 万个:
                  </p>
                </el-col>
                <el-col :span="12" :xs="20">
                  <p class="second-right">
                    <el-input
                      v-model="ordinaryForm.four"
                      clearable
                      step="0.01"
                      type="number"
                      placeholder="请输入"
                    >
                      <span slot="suffix"></span>
                      <template slot="append">/每盒</template>
                    </el-input>
                  </p>
                </el-col>
              </el-row>

              <el-row class="second-item">
                <el-col :span="12" :xs="20">
                  <p
                    class="second-left bold"
                    style="display: flex; align-items: center"
                  >
                    <span>5. 糊盒：</span>
                    <el-select
                      v-model="ordinaryForm.fiveSelect"
                      placeholder="请选择"
                    >
                      <el-option
                        v-for="item in pasteBoxOptions"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                      ></el-option>
                    </el-select>
                  </p>
                </el-col>
                <el-col :span="12" :xs="20">
                  <p class="second-right">
                    <el-input
                      v-model="ordinaryForm.five"
                      clearable
                      step="0.01"
                      type="number"
                      placeholder="请输入"
                    >
                      <span slot="suffix"></span>
                      <template slot="append">/每盒</template>
                    </el-input>
                  </p>
                </el-col>
              </el-row>

              <el-row v-if="useriInfo.is_admin" style="margin: 20px 0">
                <el-col :span="24" :xs="20">
                  <span class="bold">普通工序小计:</span>
                  <span>￥{{ ordinaryMinNum }}</span>
                </el-col>
              </el-row>
            </div>
          </el-tab-pane>
          <el-tab-pane label="额外工序" name="third">
            <el-form label-width="60px" class="demo-ruleForm">
              <div>
                <el-row>
                  <el-col :span="24" :xs="22">
                    <el-form-item prop="contacts" label="覆膜:">
                      <el-radio
                        v-for="(item, index) in [
                          '亮膜',
                          '哑膜',
                          '镭射膜',
                          '转移',
                          '上油',
                        ]"
                        :key="index"
                        v-model="elseForm.covering"
                        :label="index + 1"
                        @click.native.prevent="cancalChange(index)"
                      >
                        {{ item }}
                      </el-radio>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="12" :xs="22">
                    <el-form-item label="">
                      <el-checkbox v-model="elseForm.emboss">击凸</el-checkbox>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12" :xs="22">
                    <el-form-item label="">
                      <el-checkbox v-model="elseForm.nuv">逆向UV</el-checkbox>
                    </el-form-item>
                  </el-col>
                </el-row>

                <el-row>
                  <el-col :span="12" :xs="22">
                    <el-form-item label="">
                      <div style="display: flex">
                        <el-checkbox
                          v-model="elseForm.bronzing"
                          style="margin-right: 10px"
                        >
                          烫金（每盒单价）
                        </el-checkbox>
                        <el-input
                          v-model="elseForm.bronzingNum"
                          clearable
                          placeholder="请输入"
                          type="number"
                          step="0.01"
                        >
                          <span slot="suffix"></span>
                        </el-input>
                      </div>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12" :xs="22">
                    <el-form-item label="">
                      <div style="display: flex">
                        <el-checkbox
                          v-model="elseForm.freight"
                          style="margin-right: 10px"
                        >
                          运费（每盒单价）
                        </el-checkbox>
                        <el-input
                          v-model="elseForm.freightNum"
                          clearable
                          placeholder="请输入"
                          type="number"
                          step="0.01"
                        >
                          <span slot="suffix"></span>
                        </el-input>
                      </div>
                    </el-form-item>
                  </el-col>
                </el-row>

                <el-row>
                  <el-col :span="12" :xs="22">
                    <el-form-item label="">
                      <div style="display: flex">
                        <el-checkbox
                          v-model="elseForm.uv"
                          style="margin-right: 10px"
                        >
                          UV（每盒单价）
                        </el-checkbox>
                        <el-input
                          v-model="elseForm.uvNum"
                          clearable
                          placeholder="请输入"
                          step="0.01"
                          type="number"
                        >
                          <span slot="suffix"></span>
                        </el-input>
                      </div>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12" :xs="22">
                    <el-form-item label="">
                      <div style="display: flex">
                        <el-checkbox
                          v-model="elseForm.coding"
                          style="margin-right: 10px"
                        >
                          打码（每盒单价）
                        </el-checkbox>
                        <el-input
                          v-model="elseForm.codingNum"
                          clearable
                          placeholder="请输入"
                          type="number"
                          step="0.01"
                        >
                          <span slot="suffix"></span>
                        </el-input>
                      </div>
                    </el-form-item>
                  </el-col>
                </el-row>

                <el-row>
                  <el-col :span="12" :xs="22">
                    <el-form-item label="">
                      <el-checkbox
                        v-model="elseForm.else"
                        style="margin-right: 10px"
                      >
                        其他工序
                      </el-checkbox>
                      <div style="display: flex">
                        <el-input
                          v-model="elseForm.elseName"
                          clearable
                          placeholder="请输入"
                          style="margin-right: 10px"
                        >
                          <span slot="suffix"></span>
                        </el-input>
                        <el-input
                          v-model="elseForm.elseNum"
                          clearable
                          placeholder="请输入"
                          type="number"
                          step="0.01"
                        >
                          <span slot="suffix"></span>
                        </el-input>
                      </div>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12" :xs="22">
                    <el-form-item label="">
                      <el-checkbox v-model="elseForm.bottom">勾底</el-checkbox>
                    </el-form-item>
                  </el-col>
                </el-row>

                <el-row v-if="useriInfo.is_admin" style="margin: 20px 0">
                  <el-col :span="24" :xs="20">
                    <span class="bold">额外工序小计:</span>
                    <span>￥{{ elseMinNum }}</span>
                  </el-col>
                </el-row>
              </div>
            </el-form>
          </el-tab-pane>
          <!-- <el-tab-pane label="区间报价" name="fourth">
            <div class="second-box">
              <el-card class="box-card">
                <el-row class="second-item">
                  <el-col :span="24" :xs="20">
                    <p class="second-left">价格区间</p>
                  </el-col>
                </el-row>

                <el-row class="second-item">
                  <el-col :span="12" :xs="20">
                    <p class="second-left bold">3万及以下 ￥0.1252</p>
                  </el-col>
                  <el-col :span="12" :xs="20">
                    <p class="second-left bold">3万-5万（包括5万） ￥0.0630</p>
                  </el-col>
                </el-row>

                <el-row class="second-item">
                  <el-col :span="12" :xs="20">
                    <p class="second-right bold">
                      5万-10万（包括10万）￥0.0506
                    </p>
                  </el-col>
                  <el-col :span="12" :xs="20">
                    <p class="second-right bold">
                      10万以上（不包括10万）￥0.0440
                    </p>
                  </el-col>
                </el-row>
              </el-card>
            </div>
          </el-tab-pane> -->
        </el-tabs>

        <div v-if="activeName == 'fourth'" class="one-echarts-box">
          <div
            id="echart-three"
            :style="{ height: '364px', width: '100%' }"
          ></div>
        </div>
      </div>

      <el-row class="cost-box">
        <el-col :span="12" :xs="24">
          <p class="cost-left bold">每盒成本：￥{{ allNum }}</p>
        </el-col>
        <el-col :span="12" :xs="24">
          <p class="cost-right bold">
            <span>利润（%）：</span>
            <el-input
              v-if="useriInfo.is_admin"
              v-model="basicForm.profit"
              clearable
              step="0.1"
              placeholder="请输入"
              type="number"
            >
              <span slot="suffix"></span>
            </el-input>
          </p>
        </el-col>
      </el-row>
      <template slot="footer">
        <el-button
          type="primary"
          :loading="computedNumLoading"
          @click="computedNum"
        >
          计 算
        </el-button>
        <el-button type="primary" :loading="loading" @click="submit_apply">
          保 存
        </el-button>
        <el-button @click="close_add">取 消</el-button>
      </template>
    </MyDialog>
  </div>
</template>
<script>
  import * as echarts from 'echarts'
  import MyDialog from '@/components/Dialog'
  import { addGulid, editGuild } from '@/api/vab/guild.js'
  import { setDetail } from '@/api/admin.js'
  var chartDom2
  var myChart2
  var option2
  export default {
    components: {
      MyDialog,
    },
    data () {
      return {
        lastForm: {
          company_name: '',
          product_name: '',
          product_size: '',
          remarks: '',
        },
        computedNumLoading: false,
        showType: 'large',
        basicForm: {
          width: '0.8',
          height: '0.596',
          weight: '0.3',
          material: 'baika',
          price: '7',
          count: '8',
          orderNum: '2',
          profit: '',
        },
        ordinaryForm: {
          one: '',
          two: '',
          three: '',
          four: '',
          five: '',
          fiveSelect: '100',
        },
        basicRules: {
          width: [
            {
              required: true,
              message: '请填写开料尺寸（宽）',
              trigger: 'blur',
            },
          ],
          height: [
            {
              required: true,
              message: '请填写开料尺寸（高）',
              trigger: 'blur',
            },
          ],
          weight: [
            { required: true, message: '请填写克重（千克）', trigger: 'blur' },
          ],
          material: [
            { required: true, message: '请选择材质', trigger: 'change' },
          ],
          price: [
            {
              required: true,
              message: '请填写纸张单价（千元/吨）',
              trigger: 'blur',
            },
          ],
          count: [
            {
              required: true,
              message: '请填写拼板数（个）',
              trigger: 'blur',
            },
          ],
          orderNum: [
            {
              required: true,
              message: '请填写订单数量（万）',
              trigger: 'blur',
            },
          ],
        },
        addSwitch: false,
        loading: false,
        uploadList: false,
        ywkrules: {
          name: [
            { required: true, message: '请填写公会名称', trigger: 'blur' },
          ],
        },
        type: '',
        editId: '',
        detailLoading: false,
        class_list: [],
        activeName: 'first',
        materialOptions: [
          {
            value: 'baiban',
            label: '白板',
          },
          {
            value: 'baika',
            label: '白卡',
          },
        ],
        pasteBoxOptions: [
          {
            value: '200',
            label: '4个及以下：200元/万个',
          },
          {
            value: '150',
            label: '5个-8个：150元/万个',
          },
          {
            value: '120',
            label: '9个-12个：120元/万个',
          },
          {
            value: '100',
            label: '12个以上：100元/万个',
          },
        ],
        setObj: {
          印刷: 500,
          切模: 300,
          品检: 12,
          撕盒: 12,
        },
        setElseObj: {
          亮膜: '',
          哑膜: '',
          镭射膜: '',
          转移: '',
          上油: '',
          击凸: '',
          逆向UV: '',
        },
        elseForm: {
          covering: '',
          coveringPrice: '',
          emboss: '',
          embossPrice: '',
          nuv: '',
          nuvPrice: '',
          bronzing: '',
          bronzingNum: '',
          freight: '',
          freightNum: '',
          uv: '',
          uvNum: '',
          coding: '',
          codingNum: 0.01,
          else: '',
          elseName: '',
          elseNum: '',
          bottom: '',
          bottomPrice: '',
        },
        // 纸张小计
        paperMinNum: '',
        // 普通工序小计
        ordinaryMinNum: '',
        // 纸张成本
        lastNum: 0,
        // 用纸量
        parper: 0,
        // 额外小计
        elseMinNum: '',
        // 每盒成本
        allNum: '',
        useriInfo: {},
        // 设置的利润
        profit: '' || 6,
      }
    },
    computed: {},
    watch: {},
    created () {
      if (/Mobi|Android|iPhone/i.test(navigator.userAgent)) {
        // 当前设备是移动设备
        this.showType = 'mini'
      }
      this.getSetDetail()
    },
    mounted () {
      let datas = localStorage.getItem('userInfo')
      datas = JSON.parse(datas)
      this.useriInfo = datas
      console.log('datas', datas)
    },
    methods: {
      async getSetDetail () {
        let data = await setDetail()
        if (data.code == 200) {
          if (data.extra_processes) {
            this.setElseObj.亮膜 = data.extra_processes.亮膜
            this.setElseObj.哑膜 = data.extra_processes.哑膜
            this.setElseObj.镭射膜 = data.extra_processes.镭射膜
            this.setElseObj.转移 = data.extra_processes.转移
            this.setElseObj.上油 = data.extra_processes.上油
            this.setElseObj.击凸 = data.extra_processes.击凸
            this.setElseObj.逆向UV = data.extra_processes.逆向UV
          }
          if (data.basic_processes) {
            this.setObj.切模 = data.basic_processes.切模
            this.setObj.印刷 = data.basic_processes.印刷
            this.setObj.品检 = data.basic_processes.品检
            this.setObj.撕盒 = data.basic_processes.撕盒
            this.basicForm.profit = data.basic_processes.利润
            this.profit = data.basic_processes.利润
          }
        }
      },
      computedNum () {
        this.changeSelectSecond()
        this.computedFirst()
        this.computedeFirst()
        this.computedSecond()
        this.computedThird()
        this.computedAll()
      },
      computedFirst () {
        console.log('计算基本价格')
        this.$refs['baseForm'].validate(async (valid) => {
          if (valid) {
            let baseNum =
              this.basicForm.width *
              this.basicForm.height *
              this.basicForm.weight *
              this.basicForm.price
            baseNum = baseNum.toFixed(4)
            let b = baseNum > 1 ? 1.05 : 1.03
            let parper = Math.round(
              ((this.basicForm.orderNum * 10000) / this.basicForm.count) * b
            )
            parper < 2000 ? (parper += 200) : ''
            this.parper = parper
            let lastNum = Math.round(baseNum * parper)
            this.lastNum = lastNum
            this.paperMinNum =
              Math.floor(
                (lastNum / (this.basicForm.orderNum * 10000)) * 10000
              ) / 10000
          } else {
            return false
          }
        })
      },
      computedeFirst () {
        console.log('计算基本价格')
        let width = Number(this.basicForm.width) || 0
        let height = Number(this.basicForm.height) || 0
        let weight = Number(this.basicForm.weight) || 0
        let price = Number(this.basicForm.price) || 0
        let orderNum = Number(this.basicForm.orderNum) || 0
        let count = Number(this.basicForm.count) || 0
        let baseNum = width * height * weight * price
        if (baseNum) {
          baseNum = baseNum.toFixed(4)
        }
        let b = baseNum > 1 ? 1.05 : 1.03
        let parper = 0
        if (orderNum && count) {
          parper = Math.round(((orderNum * 10000) / count) * b)
        }
        parper < 2000 ? (parper += 200) : ''
        this.parper = parper
        let lastNum = Math.round(baseNum * parper)
        this.lastNum = lastNum
        let paperMinNum = 0
        if (lastNum && orderNum) {
          paperMinNum =
            Math.floor((lastNum / (orderNum * 10000)) * 10000) / 10000
        }
        // console.log('参数', baseNum, parper)
        this.paperMinNum = paperMinNum
      },
      computedSecond () {
        console.log('计算普通价格')
        console.log('用纸量', this.parper)
        if (!this.parper) {
          this.ordinaryMinNum = 0
          return
        }
        if (this.parper && this.basicForm.orderNum) {
          if (this.parper < 10000) {
            this.ordinaryForm.one =
              Math.round(
                (this.setObj.印刷 / (this.basicForm.orderNum * 10000)) * 10000
              ) / 10000

            this.ordinaryForm.two =
              Math.round(
                (this.setObj.切模 / (this.basicForm.orderNum * 10000)) * 10000
              ) / 10000
          } else {
            this.ordinaryForm.one =
              Math.round(
                (Math.round(Number(this.setObj.印刷) * this.parper * 0.0001) /
                  (this.basicForm.orderNum * 10000)) *
                  10000
              ) / 10000

            this.ordinaryForm.two =
              Math.round(
                (Math.round(Number(this.setObj.切模) * this.parper * 0.0001) /
                  (this.basicForm.orderNum * 10000)) *
                  10000
              ) / 10000
          }
        } else {
          this.ordinaryForm.one = 0
          this.ordinaryForm.two = 0
        }

        if (this.setObj && this.basicForm.orderNum) {
          this.ordinaryForm.three =
            Math.round(
              (Math.round(Number(this.setObj.撕盒) * this.basicForm.orderNum) /
                (this.basicForm.orderNum * 10000)) *
                10000
            ) / 10000

          this.ordinaryForm.four =
            Math.round(
              (Math.round(Number(this.setObj.品检) * this.basicForm.orderNum) /
                (this.basicForm.orderNum * 10000)) *
                10000
            ) / 10000
        } else {
          this.ordinaryForm.three = 0
          this.ordinaryForm.four = 0
        }

        if (this.ordinaryForm.fiveSelect && this.basicForm.orderNum) {
          this.ordinaryForm.five =
            Math.round(
              (Math.round(
                this.ordinaryForm.fiveSelect * this.basicForm.orderNum
              ) /
                (this.basicForm.orderNum * 10000)) *
                10000
            ) / 10000
        } else {
          this.ordinaryForm.five = 0
        }
        this.ordinaryMinNum =
          Math.round(
            (Number(this.ordinaryForm.one) +
              Number(this.ordinaryForm.two) +
              Number(this.ordinaryForm.three) +
              Number(this.ordinaryForm.four) +
              Number(this.ordinaryForm.five)) *
              10000
          ) / 10000
      },
      computedThird () {
        console.log('计算额外价格', this.elseForm)
        console.log('单价', this.setElseObj)
        let width = this.basicForm.width || 0
        let height = this.basicForm.height || 0
        let orderNum = this.basicForm.orderNum || 0
        let parper = this.parper || 0
        if (this.elseForm.covering) {
          let num = 0
          if (this.elseForm.covering == 1) {
            num = Number(this.setElseObj.亮膜) || 0
          } else if (this.elseForm.covering == 2) {
            num = Number(this.setElseObj.哑膜) || 0
          } else if (this.elseForm.covering == 3) {
            num = Number(this.setElseObj.镭射膜) || 0
          } else if (this.elseForm.covering == 4) {
            num = Number(this.setElseObj.转移) || 0
          } else if (this.elseForm.covering == 5) {
            num = Number(this.setElseObj.上油) || 0
          }
          if (orderNum) {
            this.elseForm.coveringPrice =
              (num * width * height * parper) / (orderNum * 10000)
          } else {
            this.elseForm.coveringPrice = 0
          }
        } else {
          this.elseForm.coveringPrice = 0
        }

        if (this.elseForm.emboss && parper && orderNum) {
          if (this.parper < 10000) {
            this.elseForm.embossPrice =
              Math.round((300 / (this.basicForm.orderNum * 10000)) * 10000) /
              10000
          } else {
            this.elseForm.embossPrice =
              ((this.setElseObj.击凸 / 10000) * parper) / (orderNum * 10000)
          }
        } else {
          this.elseForm.embossPrice = 0
        }

        if (this.elseForm.nuv) {
          this.elseForm.nuvPrice =
            (this.setElseObj.逆向UV * width * height * parper) /
            (orderNum * 10000)
        } else {
          this.elseForm.nuvPrice = 0
        }

        if (this.elseForm.bottom) {
          this.elseForm.bottomPrice = 0.005
        } else {
          this.elseForm.bottomPrice = 0
        }

        let elseMinNum =
          Math.round(
            (Number(this.elseForm.coveringPrice) +
              Number(this.elseForm.embossPrice) +
              Number(this.elseForm.bottomPrice) +
              Number(this.elseForm.nuvPrice)) *
              10000
          ) / 10000

        if (this.elseForm.bronzing) {
          elseMinNum =
            elseMinNum + Math.round(this.elseForm.bronzingNum * 10000) / 10000
        }

        // if (this.elseForm.freight) {
        //   elseMinNum =
        //     elseMinNum + Math.round(this.elseForm.freightNum * 10000) / 10000
        // }

        if (this.elseForm.uv) {
          elseMinNum =
            elseMinNum + Math.round(this.elseForm.uvNum * 10000) / 10000
        }

        // if (this.elseForm.coding) {
        //   elseMinNum =
        //     elseMinNum + Math.round(this.elseForm.codingNum * 10000) / 10000
        // }

        if (this.elseForm.else) {
          elseMinNum =
            elseMinNum + Math.round(this.elseForm.elseNum * 10000) / 10000
        }

        this.elseMinNum = elseMinNum
      },
      computedAll () {
        let codingNum = 0
        if (this.elseForm.coding) {
          codingNum = Math.round(this.elseForm.codingNum * 10000) / 10000
        } else {
          codingNum = 0
        }
        let freightNum = 0
        if (this.elseForm.freight) {
          freightNum = Math.round(this.elseForm.freightNum * 10000) / 10000
        } else {
          freightNum = 0
        }

        console.log('打码', codingNum, '运费', freightNum)
        this.allNum =
          Math.round(
            ((this.paperMinNum + this.ordinaryMinNum + this.elseMinNum) *
              1.0 *
              (1 + this.basicForm.profit / 100) +
              codingNum +
              freightNum) *
              10000
          ) / 10000
      },
      changeSelectSecond () {
        if (this.basicForm.count) {
          let count = Number(this.basicForm.count)
          if (count <= 4) {
            this.ordinaryForm.fiveSelect = '200'
          } else if (count >= 5 && count <= 8) {
            this.ordinaryForm.fiveSelect = '150'
          } else if (count >= 9 && count <= 12) {
            this.ordinaryForm.fiveSelect = '120'
          } else if (count > 12) {
            this.ordinaryForm.fiveSelect = '100'
          }
        }
      },
      initOption2 () {
        chartDom2 = document.getElementById('echart-three')
        myChart2 = echarts.init(chartDom2)
        option2 = {
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'shadow',
            },
          },
          legend: {
            show: true,
          },
          grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true,
          },
          yAxis: {
            type: 'value',
            boundaryGap: [0, 0.01],
          },
          xAxis: {
            type: 'category',
            data: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10'],
            axisLine: {
              show: false,
            },
          },
          series: [
            {
              name: '价格',
              type: 'bar',
              label: {
                show: true,
                position: 'top',
                valueAnimation: true,
              },
              barWidth: 15,
              data: [
                0.1252, 0.0786, 0.063, 0.0553, 0.0506, 0.0475, 0.044, 0.044,
                0.044, 0.044,
              ],
            },
          ],
        }

        option2 && myChart2.setOption(option2)
      },
      isJSON (str) {
        try {
          JSON.parse(str)
        } catch (e) {
          // 转换出错，抛出异常
          return false
        }
        return true
      },
      restData () {
        this.activeName = 'first'
        let lastForm = localStorage.getItem('lastForm')
        if (lastForm && this.isJSON(lastForm)) {
          this.lastForm = JSON.parse(lastForm)
        } else {
          this.lastForm = {
            company_name: '',
            product_name: '',
            product_size: '',
            remarks: '',
          }
        }
        ;(this.basicForm = {
          width: '0.8',
          height: '0.596',
          weight: '0.3',
          material: 'baika',
          price: '7',
          count: '8',
          orderNum: '2',
          profit: this.profit,
        }),
          (this.ordinaryForm = {
            one: '',
            two: '',
            three: '',
            four: '',
            five: '',
            fiveSelect: '100',
          })
        this.elseForm = {
          covering: '',
          coveringPrice: '',
          emboss: '',
          embossPrice: '',
          nuv: '',
          nuvPrice: '',
          bronzing: '',
          bronzingNum: '',
          freight: '',
          freightNum: '',
          uv: '',
          uvNum: '',
          coding: '',
          codingNum: 0.01,
          else: '',
          elseName: '',
          elseNum: '',
          bottom: '',
          bottomPrice: '',
        }
        // 纸张小计
        ;(this.paperMinNum = ''),
          // 普通工序小计
          (this.ordinaryMinNum = ''),
          // 纸张成本
          (this.lastNum = 0),
          // 用纸量
          (this.parper = 0),
          // 额外小计
          (this.elseMinNum = ''),
          // 每盒成本
          (this.allNum = '')
      },
      applynewadd (item, type) {
        this.type = type
        this.addSwitch = true
        this.loading = false
        this.uploadList = false
        this.editId = ''
        // 初始化数据
        this.restData()
        if (item) {
          // 这样可以使得 resetFields生效
          this.$nextTick(() => {
            // 赋值给弹窗
            this.editId = item.id
            this.lastForm = {
              company_name: item.company_name,
              product_name: item.product_name,
              product_size: item.product_size,
              remarks: item.remarks,
            }
            if (item.content && this.isJSON(item.content)) {
              let content = JSON.parse(item.content)
              this.basicForm = content.basicForm
              this.ordinaryForm = content.ordinaryForm
              this.elseForm = content.elseForm
              this.computedFirst()
              this.computedeFirst()
              this.computedSecond()
              this.computedThird()
              this.computedAll()
            }
          })
        }
      },
      async submit_apply () {
        // 保存前计算一次
        this.computedNum()
        console.log('新增报价', this.useriInfo)
        if (!this.paperMinNum && !this.ordinaryMinNum && !this.elseMinNum) {
          this.$baseMessage('请先计算', 'fail')
          return
        }
        if (!this.lastForm.company_name) {
          this.$baseMessage('请填写公司名称', 'fail')
          return
        }
        if (!this.lastForm.product_name) {
          this.$baseMessage('请填写产品名称', 'fail')
          return
        }
        if (!this.lastForm.product_size) {
          this.$baseMessage('请填写产品尺寸', 'fail')
          return
        }
        this.loading = true
        let content = JSON.stringify({
          basicForm: this.basicForm,
          ordinaryForm: this.ordinaryForm,
          elseForm: this.elseForm,
          allNum: this.allNum,
          allName: this.useriInfo.username,
        })
        let params = {
          content,
          company_name: this.lastForm.company_name,
          product_name: this.lastForm.product_name,
          remarks: this.lastForm.remarks,
          product_size: this.lastForm.product_size,
          creator: this.useriInfo.username,
        }
        localStorage.setItem('lastForm', JSON.stringify(this.lastForm))
        let data
        try {
          if (this.type == 'edit') {
            data = await editGuild(params, this.editId)
          } else {
            data = await addGulid(params)
          }
          if (data.code == 200) {
            this.$baseMessage('操作成功', 'success')
            this.uploadList = true
            setTimeout(() => {
              this.close_add()
            }, 500)
          }
          this.loading = false
        } catch (error) {
          this.loading = false
        }
      },
      close_add () {
        this.$nextTick(() => {
          this.$emit('close', this.uploadList)
          this.addSwitch = false
        })
        this.$refs['baseForm'].resetFields()
      },
      handleClick (tab, event) {
        if (tab.name == 'fourth') {
          this.$nextTick(() => {
            this.initOption2()
          })
        }
        if (tab.name == 'second') {
          this.$nextTick(() => {
            this.computedNum()
          })
        }
      },
      cancalChange (e) {
        // console.log('参数', e, this.elseForm.covering)
        this.elseForm.covering == e + 1
          ? (this.elseForm.covering = '')
          : (this.elseForm.covering = e + 1)
      },
    },
  }
</script>
<style scoped lang="scss">
  .guid-add-box {
    ::v-deep .el-form-item__label {
      // font-size: 15px !important;
      font-weight: 600;
    }
  }

  .cost-box {
    padding: 0 20px;
    .cost-right {
      display: flex;
      align-items: center;
      white-space: nowrap;
    }
  }
  .one-echarts-box {
    width: 100%;
  }
  .second-box {
    padding: 0 10px;
    p {
      margin: 10px 0;
    }
    .second-item {
      font-size: 20px;
    }
  }
  .bold {
    font-weight: bold;
  }
  .df-end {
    display: flex;
    justify-content: flex-end;
  }
  .upload-box {
    width: 100px;
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px dashed #c0ccda;
    cursor: pointer;
  }
  .live-style-item {
    float: right;
    color: #8492a6;
    font-size: 13px;
    max-width: 200px;
  }

  .bind-box {
    padding: 0 0 20px;
  }

  .bind-box-table {
    padding: 0 0 20px;
  }

  .footer {
    text-align: center;
    padding: 10px 0 45px;

    & > :nth-child(n + 2) {
      margin-left: 14px;
    }

    button {
      width: 106px;
      height: 48px;
    }
  }
</style>
